<template>
	<view class="mine-page">
		<view class="header">
			<view class="placeholder" :style="{height: `${statusBarHeight + 44}px`}" />
			<HeaderInfo />
		</view>
		<view class="main-containier">
			<LevelCoin />
			<MakeCoins :reward_list="reward_list" />
			<MemberEquity />
			<ShopCard />
			<MemberActivitySwiper />
			<CoinToGiftSwiper />
			<view class="logout-btn" v-if="isLogin">
				<u-button plain text="退出当前账号" @click="onLogout" />
			</view>
		</view>


		<view v-if="!isLogin" class="login-mask">
			<get-phone/>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import LevelCoin from './components/mine/LevelCoin.vue'
	import HeaderInfo from './components/mine/HeaderInfo.vue'
	import MakeCoins from './components/mine/MakeCoins.vue'
	import MemberEquity from './components/mine/MemberEquity.vue'
	import ShopCard from './components/mine/ShopCard.vue'
	import MemberActivitySwiper from './components/mine/MemberActivitySwiper.vue'
	import CoinToGiftSwiper from './components/mine/CoinToGiftSwiper.vue'
	import {
		wxma_logout,
		wx_customer_share_prefetch,
		wx_customer_share_upd,
		wx_customer_reward_list
	} from '@/api'
	import shareMixin from '../mixins/shareMixin'
	import {
		reject
	} from 'lodash-es'
	import store from '@/store'
	export default {
		name: 'Mine',
		components: {
			LevelCoin,
			HeaderInfo,
			MakeCoins,
			MemberEquity,
			ShopCard,
			MemberActivitySwiper,
			CoinToGiftSwiper
		},
		data() {
			return {
				reward_list: []
			}
		},
		mixins: [shareMixin],

		computed: {
			...mapState(['isLogin', 'statusBarHeight'])
		},

		onShow() {
			store.dispatch('getUserInfo')
			wx_customer_reward_list().then(res => {
				this.reward_list = res.reward_list
			})
		},
		onLoad(options) {
			console.log('参数---->', options)
		},

		methods: {
			...mapMutations(['setLoginState']),
			handleShareInfo() {
				const promise = new Promise((resolve, reject) => {
					wx_customer_share_prefetch({
						type: 10,
						source_id: 60,
					}).then(async res => {
						await wx_customer_share_upd({
							share_id: res.share_id,
							type: 10,
							source_id: 60
						})
						resolve({
							path: `pages/home?share_id=${res.share_id}`
						})
					})
				})
				return {
					promise
				}
			},
			onLogout() {
				wxma_logout().then(res => {
					this.setLoginState(res.is_regist)
					this.$utils.showToast('退出成功！')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		position: relative;
		height: calc(100vh - 100rpx);

		.header {
			height: 400rpx;
			background: linear-gradient(to bottom, #38FFDA, #D3FFE6);
		}

		.main-containier {
			position: relative;
			top: -100rpx;
			padding-bottom: 20rpx;

			.logout-btn {
				width: 90%;
				margin: 40rpx auto 20rpx;
			}
		}
	}

	.login-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
</style>